<template>
  <div class="admin">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>管理员列表</span>
        <el-button type="success" icon="el-icon-plus" class="addBtn" @click="addAdmin">新增</el-button>
      </div>

      <!--      搜索-->
      <div class="nav">
        <el-input placeholder="请输入用户名" v-model="keyWord" class="input-with-select" clearable>
          <el-button slot="append" icon="el-icon-search" @click="getList"></el-button>
        </el-input>
      </div>

      <!--      列表-->
      <el-table :data="list" style="width: 100%">
        <!--        <el-table-column prop="avatarUrl" label="头像" align="left"/>-->
        <el-table-column prop="userName" label="用户名" align="left"/>
<!--        <el-table-column prop="grade" label="等级" align="center">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag v-if="scope.row.grade==0" type="danger">普通管理员</el-tag>-->
<!--            <el-tag v-else-if="scope.row.grade==1" type="success">超级管理员</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column prop="mobile" label="手机号" align="center"/>
        <el-table-column prop="email" label="邮箱" align="center"/>
        <el-table-column prop="grade" label="等级" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.sex==0" type="danger">女</el-tag>
            <el-tag v-else-if="scope.row.sex==1" type="success">男</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"/>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="success" icon="el-icon-edit" size="mini" @click="editAdmin(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeAdmin(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

      <!--      弹出框-->
      <el-dialog :title="title" :visible.sync="dialogTableVisible" width="500px" @close="cancel">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="form.userName"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" show-password/>
          </el-form-item>
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="form.mobile" maxLength="11"/>
          </el-form-item>
          <el-form-item label="邮箱" prop="mobile">
            <el-input v-model="form.email"/>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio v-model="form.sex" :label="0">女</el-radio>
            <el-radio v-model="form.sex" :label="1">男</el-radio>
          </el-form-item>
          <!-- <el-form-item label="等级" prop="grade">
            <el-select class="grade" v-model="form.grade" placeholder="等级">
              <el-option label="普通管理员" :value="0"/>
              <el-option label="超级管理员" :value="1"/>
            </el-select>
          </el-form-item> -->
        </el-form>
        <div slot="footer">
          <el-button @click="cancel" type="danger">取 消</el-button>
          <el-button type="success" @click="submit">确 定</el-button>
        </div>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
  import {
    getAdmin,
    getAdminDetails,
    removeAdmin,
    editAdmin,
    addAdmin
  } from '../../api/api'
  import {BASE_URL} from "../../settings"

  export default {
    name: "admin",
    data() {
      return {
        BASE_URL,
        list: [],  //用户列表
        keyWord: '',  //关键词
        pageNum: 1,  //当前页数
        pageSize: 5,  //显示数量
        total: 10,//总条数
        dialogTableVisible: false,  //弹出框
        title: '',  //弹框标题
        form: {},  //表单
        rules: {
          userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [{required: true, message: '请输入密码', trigger: 'blur'}],
          mobile: [{required: true, message: '请输入手机号', trigger: 'blur'}],
          grade: [{required: true, message: '请选择等级', trigger: 'blur'}],
        },  //表单验证
      }
    },
    methods: {
      //获取用户列表
      async getList() {
        const res = await getAdmin({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          keyWord: this.keyWord
        })
        this.list = res.data.list
        this.total = res.data.total
      },
      //条数改变
      handleSizeChange(pageSize) {
        this.pageSize = pageSize
        this.getList()
      },
      //页数改变
      handleCurrentChange(pageNum) {
        this.pageNum = pageNum
        this.getList()
      },
      //删除管理员
      removeAdmin(row) {
        this.$confirm('确定删除此管理员么?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const res = await removeAdmin({id: row._id})
          this.$message.success(res.msg)
          this.getList()
        }).catch(() => this.$message.info('取消删除'))
      },
      //添加管理员
      async addAdmin() {
        this.title = '添加管理员'
        this.dialogTableVisible = true
      },
      // 修改管理员
      async editAdmin(row) {
        this.title = '修改管理员'
        const res = await getAdminDetails({id: row._id})
        this.form = res.data
        this.dialogTableVisible = true
      },
      //提交表单
      submit() {
        this.$refs.form.validate(async valid => {
          if (valid) {
            let res
            if (this.form._id) res = await editAdmin(this.form)
            else res = await addAdmin(this.form)
            this.$message.success(res.msg)
            this.dialogTableVisible = false
            this.reset()
            this.getList()
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //取消表单
      cancel() {
        this.reset()
        this.dialogTableVisible = false
      },
      //重置表单
      reset() {
        this.form = {}
        this.$refs.form.resetFields()
      }
    },
    created() {
      this.getList()
    }
  }
</script>

<style scoped lang="scss">
  img {
    width: 50%;
  }

  .el-select {
    width: 100px;
  }

  .grade {
    width: 150px;
  }

  .nav {
    .el-input {
      width: 300px;
    }
  }
</style>
